<template>
  <el-drawer
    v-model="visible"
    title="银行流水详情"
    direction="rtl"
    size="800px"
    :before-close="handleClose"
  >
    <div class="transaction-detail" v-if="transaction">
      <!-- 基本信息 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">流水号:</span>
              <span class="value">{{ transaction.transactionId }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">交易日期:</span>
              <span class="value">{{ formatDate(transaction.transactionDate) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">交易时间:</span>
              <span class="value">{{ formatTime(transaction.transactionTime) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">交易金额:</span>
              <span class="value amount" :class="{ 'income': transaction.amount > 0, 'expense': transaction.amount < 0 }">
                {{ formatCurrency(transaction.amount) }}
              </span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">账户余额:</span>
              <span class="value">{{ formatCurrency(transaction.balance) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">付款方:</span>
              <span class="value">{{ transaction.payerName }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">付款账户:</span>
              <span class="value">{{ maskAccount(transaction.payerAccount) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">银行名称:</span>
              <span class="value">{{ transaction.bankName }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 交易备注 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>交易备注</span>
          </div>
        </template>
        <div class="remark-content">
          {{ transaction.remark || '无备注信息' }}
        </div>
      </el-card>

      <!-- 数据来源 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>数据来源</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">来源类型:</span>
              <el-tag :type="getDataSourceType(transaction.dataSource)">
                {{ getDataSourceText(transaction.dataSource) }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">导入批次:</span>
              <span class="value">{{ transaction.importBatch || '无' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">创建时间:</span>
              <span class="value">{{ formatDateTime(transaction.createdAt) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">更新时间:</span>
              <span class="value">{{ formatDateTime(transaction.updatedAt) }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 匹配状态 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>匹配状态</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">匹配状态:</span>
              <el-tag :type="getMatchStatusType(transaction.matchStatus)">
                {{ getMatchStatusText(transaction.matchStatus) }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="12" v-if="transaction.matchedOrder">
            <div class="detail-item">
              <span class="label">匹配订单:</span>
              <span class="value">{{ transaction.matchedOrder.platformOrderId }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">过滤状态:</span>
              <el-tag :type="transaction.isFiltered ? 'warning' : 'success'">
                {{ transaction.isFiltered ? '已过滤' : '正常' }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="12" v-if="transaction.isFiltered">
            <div class="detail-item">
              <span class="label">过滤原因:</span>
              <span class="value">{{ transaction.filterReason || '无' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">重复标记:</span>
              <el-tag :type="transaction.isDuplicate ? 'danger' : 'success'">
                {{ transaction.isDuplicate ? '是' : '否' }}
              </el-tag>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <template #footer>
      <div class="drawer-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleEdit">编辑备注</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  View, Connection, Edit, More, CopyDocument, Delete, CircleCheck,
  Filter, Check
} from '@element-plus/icons-vue'

// 定义组件props
const props = defineProps<{
  modelValue: boolean
  transaction: any
}>()

// 定义组件emits
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'edit', transaction: any): void
}>()

// 计算属性
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 方法
const handleClose = () => {
  visible.value = false
}

const handleEdit = async () => {
  if (!props.transaction) return
  
  try {
    const { value } = await ElMessageBox.prompt('编辑交易备注', '编辑流水', {
      inputValue: props.transaction.remark,
      inputPlaceholder: '请输入交易备注',
      type: 'info'
    })
    
    emit('edit', { ...props.transaction, remark: value })
    ElMessage.success('备注更新成功')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('更新失败')
    }
  }
}

// 工具函数
const formatDate = (date: string) => {
  return date.split('-').slice(1).join('-')
}

const formatTime = (time: string) => {
  return time
}

const formatDateTime = (datetime: string) => {
  return new Date(datetime).toLocaleString('zh-CN')
}

const formatCurrency = (amount: number) => {
  const absAmount = Math.abs(amount)
  const sign = amount >= 0 ? '' : '-'
  return sign + '¥' + absAmount.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

const maskAccount = (account: string) => {
  if (account.length <= 8) return account
  return account.substring(0, 4) + '****' + account.substring(account.length - 4)
}

const getMatchStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    matched: '已匹配',
    pending: '待确认',
    unmatched: '未匹配'
  }
  return statusMap[status] || status
}

const getMatchStatusType = (status: string) => {
  const typeMap: Record<string, any> = {
    matched: 'success',
    pending: 'warning',
    unmatched: 'info'
  }
  return typeMap[status] || 'info'
}

const getDataSourceText = (source: string) => {
  const sourceMap: Record<string, string> = {
    file_import: '文件导入',
    plugin_capture: '插件捕获',
    api_sync: 'API同步'
  }
  return sourceMap[source] || source
}

const getDataSourceType = (source: string) => {
  const typeMap: Record<string, any> = {
    file_import: 'primary',
    plugin_capture: 'success',
    api_sync: 'info'
  }
  return typeMap[source] || 'info'
}
</script>

<style scoped lang="scss">
.transaction-detail {
  .detail-card {
    margin-bottom: 20px;
    
    .card-header {
      font-weight: 600;
      color: #1f2d3d;
    }
    
    .detail-item {
      display: flex;
      margin-bottom: 12px;
      
      .label {
        width: 100px;
        font-weight: 500;
        color: #606266;
      }
      
      .value {
        flex: 1;
        color: #1f2d3d;
        
        &.amount {
          font-weight: 600;
          font-size: 16px;
          
          &.income {
            color: #67c23a;
          }
          
          &.expense {
            color: #f56c6c;
          }
        }
      }
    }
    
    .remark-content {
      min-height: 60px;
      padding: 12px;
      background-color: #f5f7fa;
      border-radius: 4px;
      color: #1f2d3d;
    }
  }
}

.drawer-footer {
  text-align: right;
}
</style>